<template>
  <div class="user-wrapper" style="display: flex;align-items: center;height: 110px;" :class="theme">
    <!-- <div class="user-edit-mode" style="display: inline-block;">
      <span>在线编辑模式：</span>
      <a-select
        ref="select"
        v-model:value="editMode"
        @change="editModeHandleChange"
      >
        <a-select-option value="客户端模式">客户端模式</a-select-option>
        <a-select-option value="服务端模式">服务端模式</a-select-option>
      </a-select>
    </div>
    <user-portal-designe @reloadPortlet="$emit('reloadPortlet')"/> -->
    <!-- {{ 11 }} -->

    <!-- <a-tooltip style="cursor:pointer" v-if="isDesktop()">
      <template slot="title">
        修改密码
      </template>
      <a-icon type="lock" @click="updatePassword" :style="{ fontSize: '18px', padding: '0 10px'}"/>
    </a-tooltip>
    <a-tooltip style="cursor:pointer" v-if="isDesktop()">
      <template slot="title">
        {{$t('m.system.portal.entity.searchMenu')}}
      </template>
      <a-icon type="search" @click="showClick" :style="{ fontSize: '18px', padding: '0 10px'}"/>
    </a-tooltip> -->

    <!-- <a-popover
      placement="bottom"
      :overlayStyle="{ width: '400px' }"
      overlayClassName="poperlay-table">
      <template v-if="badgeNum == 0" slot="content">
        <p style="text-align: center;padding: 10px;">暂无数据</p>
      </template>
      <template v-else slot="content">
        <div
          v-for="(item,index) in messList"
          :key="index"
          @click="toMyAnnouncement"
          class="poperlay-table-content"
          style="line-height: 2;">
          <p>{{ item.fmessage }}</p>
          <p>{{ item.fsxwcsj }}</p>
        </div>
        <div class="poperlay-table-bottom">
          <span @click="markAsRead">全部标为已读</span>
        </div>
      </template>
      <template slot="title">
        <span>通知</span>
      </template> -->
      <!-- 消息 -->
      <!-- <a-badge :count="messagesNum?messagesNum:badgeNum">
        <user-message @toMyAnnouncement="toMyAnnouncement" v-if="isDesktop()"/>
      </a-badge>
    </a-popover> -->

    <!-- <a-tooltip style="cursor:pointer" v-if="isDesktop()">
      <template slot="title">
        {{$t('m.system.portal.entity.theme')}}
      </template>
      <a-icon type="skin" @click="systemSetting" :style="{ fontSize: '18px', padding: '0 10px'}"/>
    </a-tooltip> -->

    <a-tooltip v-if="back && isDesktop()" style="cursor:pointer;">
      <template slot="title">
        {{$t('m.system.portal.entity.console')}}
      </template>
      <!-- ,color: '#2b5aaa' -->
      <a-icon type="desktop" @click="toConsole" :style="{ fontSize: '18px', padding: '3px 10px 0 0',}" style="color: #fff;"/>
    </a-tooltip>
    <a-tooltip style="cursor:pointer;" v-if="!onlyCurrentPathData && currentPath !== '/index/portal'">
      <template slot="title">返回首页</template>
      <span
       class="iconfont spcy-icon-huiyishi3"
       @click="toHomepage"
       :style="{ fontSize: '18px', padding: '3px 10px 0 0',}" style="color: #fff;"></span>
    </a-tooltip>
    <!-- <span style="display: flex;flex-direction: column;justify-content: center;align-items: center;height: 30px;">
      <span class="iconfont spcy-icon-huiyishi3" @click="toHomepage" :style="{ fontSize: '18px', padding: '0 10px 0 0',color: '#2b5aaa'}"></span>
      <span style="font-size: 12px;color: #2F54EB;">返回首页</span>
    </span> -->

    <!-- <a-tooltip style="cursor:pointer" v-if="isDesktop()">
      <template slot="title">
        {{ fullScreen ? $t('m.system.portal.entity.nuFullScreen') : $t('m.system.portal.entity.fullScreen') }}
      </template>
      <a-icon
        :type="fullScreen ? 'fullscreen-exit' : 'fullscreen'"
        @click="toggleFullScreen"
        :style="{ fontSize: '18px', padding: '0 10px'}"/> -->
    <!-- </a-tooltip> -->

    <a-dropdown>
      <span class="action action-full ant-dropdown-link user-dropdown-menu" style="white-space: nowrap;height: auto !important;padding: 0px 25px 0px 0 !important;">
        <!-- <a-avatar class="avatar" :src="getAvatar()"/>
        <span v-if="isDesktop()">{{ nickname() }}</span> -->
        <span style="margin-right: 10px;vertical-align: middle;font-size:15px;text-shadow: rgb(67, 66, 66) 2px 2px 6px;font-weight: 600;color: #fff;">
          <span v-if="currentPath == '/index/portal'">欢迎您，</span>
          {{ realname }}</span>
        <a-icon type="caret-down" style="text-shadow: rgb(67, 66, 66) 2px 2px 6px;font-weight: 600;color: #fff;"/>
      </span>
      <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
        <a-menu-item key="0" style="cursor:default; background: none;">
          <span style="padding: 24px 10px 24px 10px">
            {{$t('m.system.portal.entity.department')}}：{{ orgname() || $t('m.system.portal.entity.notDepartment') }}
          </span>
          <a-divider style="margin: 10px"/>
        </a-menu-item>

        <a-menu-item key="11" @click="showClick" v-if="isMobile()">
          <ych-icon type="search"/>
          <span>{{$t('m.system.portal.entity.searchMenu')}}</span>
        </a-menu-item>
        <a-menu-item key="12" @click="toMyAnnouncement" v-if="isMobile()">
          <ych-icon type="sound"/>
          <span>{{$t('m.system.portal.entity.message')}}</span>
        </a-menu-item>
        <a-menu-item key="13" @click="systemSetting" v-if="isMobile()">
          <ych-icon type="skin"/>
          <span>{{$t('m.system.portal.entity.theme')}}</span>
        </a-menu-item>
        <a-menu-item key="14" @click="toConsole" v-if="isMobile() && back">
          <ych-icon type="desktop"/>
          <span>{{$t('m.system.portal.entity.console')}}</span>
        </a-menu-item>
        <a-menu-item key="15" @click="toggleFullScreen" v-if="isMobile()">
          <ych-icon :type="fullScreen ? 'fullscreen-exit' : 'fullscreen'"/>
          <span> {{ fullScreen ? $t('m.system.portal.entity.nuFullScreen') : $t('m.system.portal.entity.fullScreen') }}</span>
        </a-menu-item>

        <a-menu-item key="2" @click="updatePassword">
          <ych-icon type="lock"/>
          <span>{{$t('m.system.portal.entity.changePassword')}}</span>
        </a-menu-item>
        <a-menu-item key="3" @click="updateCurrentDepart">
          <ych-icon type="cluster"/>
          <span>{{$t('m.system.portal.entity.changeDepartment')}}</span>
        </a-menu-item>
       <a-menu-item key="4" @click="updateCurrentLanguage">
          <ych-icon type="folder"/>
          <span>{{$t('m.system.portal.entity.switchLanguage')}}</span>
        </a-menu-item>
        <a-menu-item key="5" @click="updateCurrentYear" v-if="isCaiWu || isChuNa">
          <ych-icon type="folder"/>
          <span>{{$t('m.system.portal.entity.switchYear')}}</span>
        </a-menu-item>
        <a-menu-item key="6" @click="handleLogout">
          <ych-icon type="logout"/>
          <span>{{$t('m.system.portal.entity.logout')}}</span>
        </a-menu-item>
      </a-menu>
    </a-dropdown>

    <user-password ref="userPassword"></user-password>
    <depart-select ref="departSelect" :closable="true"  :title="$t('m.system.portal.entity.changeDepartment')"></depart-select>
    <setting-drawer ref="settingDrawer"></setting-drawer>
    <search-menu ref="searchMenu" :searchMenuOptions="searchMenuOptions"/>
    <language-select ref="languageSelect"></language-select>
    <year-select ref="yearSelect"></year-select>
  </div>
</template>

<script>
import {onlineTypeSwitch,sysMessList,getTzMessage,yssbSfcw,yssbSfcn } from "@/api/manage.js"
import UserMessage from './UserMessage'
import UserPassword from './UserPassword'
import SearchMenu from './SearchMenu'
import SettingDrawer from '../setting/SettingDrawer'
import UserPortalDesigne from './UserPortalDesigne'
import DepartSelect from './DepartSelect'
import {mapActions, mapGetters, mapState} from 'vuex'
import {mixinDevice} from '@/utils/mixin.js'
import {getFileAccessHttpUrl} from '@/api/manage'
import store from '../../store'
import LanguageSelect from "./LanguageSelect";
import YearSelect from "./yearSelect";

export default {
  name: 'UserMenu',
  mixins: [mixinDevice],
  data() {
    return {
      fullScreen: document.fullscreenElement,
      searchMenuOptions: [],
      back: store.getters.back,
      realname:store.getters.userInfo.realname,
      editMode:'客户端模式',
      //OA
      badgeNum: 0,
      messList: [],
      idList: [],
      currentPath:'',
      isCaiWu: false,
      isChuNa: false,
    }
  },
  components: {
    UserMessage,
    UserPassword,
    DepartSelect,
    LanguageSelect,
    SettingDrawer,
    SearchMenu,
    UserPortalDesigne,
    YearSelect,
  },
  props: {
    theme: {
      type: String,
      required: false,
      default: 'dark'
    }
  },
  created() {
    this.currentPath = this.$route.path
    // setInterval(()=>{
    //   this.getsysMessList()
    // }, 500000);
    let lists = []
    this.searchMenus(lists, this.permissionMenuList)
    this.searchMenuOptions = [...lists]
    onlineTypeSwitch().then(res=>{
      if(res.code == 200){
        //console.log('当前是什么模式',res.result)
        this.editMode = res.result
        this.$store.commit("SET_EDITMODE", res.result)
      }else{
        this.$message.warning(res.message)
      }
    })

    // this.getsysMessList()
    this.getYssbSfcw()
    this.getYssbSfcn()
  },
  watch: {
    '$route':function() {
      this.currentPath = this.$route.path
    }
  },
  computed: {
    messagesNum(){
    //   this.getsysMessList()
      //console.log('我在图标页面改变了',this.$store.state.permission.messagesNum)
      return this.$store.state.permission.messagesNum
    },
    ...mapState({
      // 后台菜单
      permissionMenuList: state => state.user.permissionList.filter(vo => vo.back == '0'),
      onlyCurrentPathData: state => state.user.onlyCurrentPath,//是否为单个功能

    }),
  },
  methods: {
    ...mapActions(['Logout']),
    ...mapGetters(['nickname', 'orgname', 'avatar', 'userInfo']),
    // 全屏切换
    toggleFullScreen() {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen()
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        }
      }
      this.fullScreen = !this.fullScreen
    },
    showClick() {
      this.$refs.searchMenu.visible = true
    },
    getAvatar() {
      const avatar = getFileAccessHttpUrl(this.avatar())
      if (avatar) {
        return avatar
      } else {
        return process.env.BASE_URL + 'avatar.jpg'
      }
    },
    handleLogout() {
      const that = this
      this.$confirm({
        title: this.$t('m.common.label.prompt'),
        content: this.$t('m.system.portal.verify.logout'),
        onOk() {
          return that.Logout({oss: true}).then(() => {
            // window.location.href = process.env.BASE_URL || '/'
            //window.location.reload()
            that.$router.push({path:'/index/login'}).catch(err => {})
          }).catch(err => {
            that.messageUtil.error(err.message)
          })
        },
        onCancel() {
        },
      })
    },
    toConsole() {
      this.$router.push(store.getters.CONSOLE_INDEX_MAIN_PAGE_PATH).catch(err => {})
    },
    //返回首页
    toHomepage(){
       this.$router.push('/index/portal')
    },
    updatePassword() {
      let username = this.userInfo().username
      this.$refs.userPassword.show(username)
    },
    updateCurrentDepart() {
      this.$refs.departSelect.show()
    },
    updateCurrentLanguage() {
      this.$refs.languageSelect.show()
    },
    updateCurrentYear() {
      this.$refs.yearSelect.show()
    },
    systemSetting() {
      this.$refs.settingDrawer.visible = true
    },
    searchMenus(arr, menus) {
      for (let i of menus) {
        if (!i.hidden && 'layouts/RouteView' !== i.component) {
          arr.push(i)
        }
        if (i.children && i.children.length > 0) {
          this.searchMenus(arr, i.children)
        }
      }
    },
    toMyAnnouncement() {
      this.$router.push({
        path: '/account/userannouncement',
        name: 'account-userannouncement'
      }).catch(err => {});
    },
    editModeHandleChange(val){
      onlineTypeSwitch({ftype:val}).then(res=>{
        if(res.code == 200){
          this.editMode = res.result
          this.$store.commit("SET_EDITMODE", res.result)
          this.$message.success(res.message)
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    // 获取未读消息列表
    getsysMessList(){
      sysMessList().then(res => {
        //console.log(res)
        this.badgeNum = res.result.total
        this.messList = res.result.records
        this.idList = []
        this.messList.forEach(item => {
          this.idList.push(item.id)
        })
        //console.log('badgeNum',this.badgeNum)
        //console.log('messList',this.messList)
      })
    },
    // 标为已读
    markAsRead(){
      //console.log('全部已读')
      let list = this.idList.toString()
      getTzMessage({ids:list}).then(res => {
        if(res.code == 200){
          this.badgeNum = 0
          this.messList = []
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getYssbSfcw(){
        yssbSfcw().then(res => {
            if(res.success && res.result){
                this.isCaiWu = res.result
            }
        })
    },
    getYssbSfcn(){
        yssbSfcn().then(res => {
            if(res.success && res.result){
                this.isChuNa = res.result
            }
        })
    },
  }
}
</script>
<style lang="less">
.user-edit-mode{
  .ant-select-selection{
    height: 25px !important;
  }
  .ant-select-selection__rendered{
    line-height: 22px !important;
  }
}
.poperlay-table {
  .ant-popover-title {
    padding: 10px;
    font-weight: 500;
  }
  .ant-popover-inner {
    border: 1px solid #5ca3e5;
    border-radius: 5px;
  }
  .ant-popover-inner-content {
    max-height: 400px;
    overflow: scroll;
  }
  .poperlay-table-content {
    line-height: 1.5 !important;
    border-bottom: 1px solid #e8e8e8;
  }
  .poperlay-table-content:hover {
    color: white;
    background-color: #5ca3e5;
  }
  .poperlay-table-bottom {
    text-align: right;
    padding: 10px;
  }
}
</style>
